<template>
  <div class="flex flex-column height">
    <header-top
      ref="header"
      :TxtHeader="TxtHeader"
      @leftClick="back"
      style="border-bottom:1px solid #fdfdfd"
    ></header-top>
    <div class="doctor_list">
      <div :style="{ height: height + 'px', 'overflow-y': 'auto' }">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :offset="10"
          class="list"
        >
          <div v-if="listData.length">
            <list
              v-for="(item, index) in listData"
              :key="index"
              @toOrderForm="toOrderFormFn"
              @getDetailFn="getDetailFn"
              :dataItem="item"
            ></list>
          </div>
        </van-list>
      </div>
    </div>
    <van-loading
      type="spinner"
      v-if="loading1"
      class="spinner"
      color="#1989fa"
    />
  </div>
</template>
<script>
import List from "@/components/list";
import HeaderTop from "@/components/header-top";
import { doctorList } from "@/api/index";
export default {
  name: "DoctorList",
  components: {
    HeaderTop,
    List
  },
  data() {
    return {
      loading1: false,
      TxtHeader: {
        //头部设置
        background: "#fff", //头部背景颜色
        color: "#0a0a0a", //头部中间文字颜色
        title: "口腔科",
        leftOpt: {
          //左边按钮设置
          icon: "",
          text: "",
          color: "#000"
        }
      },
      loading: false,
      finished: false,
      department: "",
      page: 1,
      size: 10,
      listData: [],
      height: 0
    };
  },
  created() {
    this.TxtHeader.title = this.$route.query.name;
    this.department = this.$route.query.code;
  },
  mounted() {
    this.height = window.innerHeight - this.$refs.header.$el.clientHeight;
  },
  methods: {
    doctorListFn() {
      //获取医生列表数据
      this.loading = true;
      const obj = {
        current: this.page,
        size: this.size,
        cityKey: "",
        departMentKey: this.department,
        sort: ""
      };
      doctorList(obj)
        .then(res => {
          this.loading = false;
          if (res.body.records.length) {
            this.finished = res.body.current == res.body.pages;
            this.listData = this.listData.concat(res.body.records);
            this.listData = this.listData.filter(key => key != "");
          } else {
            this.finished = true;
            this.listData = [];
          }
        })
        .catch(() => {
          this.loading = false;
          return false;
        });
    },
    getDetailFn(item) {
      console.log(item);
      this.$router.push("/detail");
    },
    toOrderFormFn(item) {
      console.log(item);
      localStorage.setItem("orderType", item);
      this.$router.push("/order");
    },
    back() {
      this.$router.push("/index");
    },
    onLoad() {
      this.doctorListFn();
      this.page++;
    }
  }
};
</script>
<style lang="less" scoped>
.doctor_list {
  background: #fff;
  .list {
    margin: 0 0.11rem 0 0.14rem;
  }
}
</style>
